<template>
  <div>
    <div class="search">
      <el-form :inline="true" ref="FormRef" :model="formInline" class="demo-form-inline">
        <el-form-item label="学校">
          <el-select v-model="formInline.schoolId" placeholder="请选择">
            <el-option v-for="item in schools" :key="item.schoolId" :label="item.schoolName" :value="item.schoolId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="formInline.userType" placeholder="请选择">
            <el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.userType">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="formInline.stuNo" placeholder="请输入学号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button round type="success" :loading="loading" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button round type="warning" icon="el-icon-edit" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="add">
        <addInfo @addChange="editeChangeFn"></addInfo>
      </div>
    </div>
    <el-table :data="tableData">
      <el-table-column prop="stuNo" label="学号">
      </el-table-column>
      <el-table-column prop="schoolId" label="学校">
        <template slot-scope="scope">
          {{ schools.find(item => item.schoolId === scope.row.schoolId)?.schoolName }}
        </template>
      </el-table-column>
      <el-table-column prop="username" label="姓名">
      </el-table-column>
      <el-table-column prop="gender" label="性别">
      </el-table-column>
      <el-table-column prop="userType" label="类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.userType == 0" type="success">学生</el-tag>
          <el-tag v-if="scope.row.userType == 1" type="warning">教师</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="200px">
      </el-table-column>
      <el-table-column prop="phone" label="手机号">
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <div class="operate">
            <editUser :key="scope.row.userId" @editeChange="editeChangeFn" :info="scope.row"></editUser>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current" :page-sizes="[10, 20, 30, 40]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { findAll, getRoles, deleteById } from '@/api/user'
import { getShools } from '@/api/School'
import editUser from './cpn/editUser.vue'
import addInfo from './cpn/addInfo.vue'
export default {
  components: {
    editUser,
    addInfo
  },
  data() {
    return {
      tableData: [],
      formInline: { schoolId: '', userType: '', stuNo: '' },
      schools: [],
      roles: [],
      loading: false,
      pagination: {
        total: 0,
        size: 10,
        current: 1
      }
    }
  },
  mounted() {
    this.findAllFn()
    this.getShoolsFn()
    this.getRolesFn()
  },
  methods: {
    addInfo() {},
    editeChangeFn() {
      this.findAllFn()
    },
    onSubmit() {
      this.findAllFn()
    },
    reset() {
      this.formInline = { schoolId: '', userType: '', stuNo: '' }
      this.findAllFn()
    },
    handleEdit(row) {
      console.log(row.userId)
    },
    handleDelete(row) {
      deleteById(row.userId).then(res => {
        this.$message({
          type: 'success',
          message: res.msg
        })
        this.findAllFn()
      })
      console.log(row.userId)
    },
    handleSizeChange(val) {
      this.pagination.size = val
      this.findAllFn()
    },
    handleCurrentChange(val) {
      this.pagination.current = val
      this.findAllFn()
    },
    getShoolsFn() {
      this.loading = true
      getShools().then(res => {
        this.loading = false
        this.schools = res.data
        this.$store.commit('school/setSchool', res.data)
      })
    },
    findAllFn() {
      const data = {
        user: this.formInline,
        page: this.pagination
      }
      findAll(data).then(res => {
        this.tableData = res.data.records
        this.pagination.current = res.data.current
        this.pagination.size = res.data.size
        this.pagination.total = res.data.total
      })
    },
    getRolesFn() {
      getRoles().then(res => {
        this.roles = res.data
        this.$store.commit('user/setRoles', res.data)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.operate {
  display: flex;
  // justify-content: space-between;
  align-items: center;
}
.search {
  display: flex;
  justify-content: space-between;
}
</style> 